<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转盘抽奖</title>
    <style>
        .wheel{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: #f9f9f9;
            position: relative;
            margin: 0 auto;
            padding: top 50px;
            
        }
        .sector{
            width: 50%;
            height: 50%;
            position: absolute;
            box-sizing: border-box;
            cursor: pointer;
            text-align: center;
            line-height: 150px;
            font-size: 20px;
            color: #333;
            transform: transform 0.5s ease;
            transform-origin:50% 50% ;
        }
        #sector1{
            transform: rotate(45deg);
            background-color: #ff6666;
        }
        #sector2{
            transform: rotate(90deg);
            background-color: #66ff66;
        }
        #sector3{
            transform: rotate(135deg);
            background-color: #6666ff;
        }
        #sector4{
            transform: rotate(180deg);
            background-color: #ffff66;
        }
        #sector5{
            transform: rotate(225deg);
            background-color: #ff66ff;
        }
        #sector6{
            transform: rotate(270deg);
            background-color: #66ffff;
        }
        #sector7{
            transform: rotate(315deg);
            background-color: #ff9900;
        }
        #sector8{
            transform: rotate(360deg);
            background-color: #99ff00;
        }
        button{
            padding: 10px 20px;
            background-color: #4cad50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>转盘抽奖</h2>
    <div class="wheel">
        <div id="sector1" class="sector">奖品1</div>
        <div id="sector2" class="sector">奖品2</div>
        <div id="sector3" class="sector">奖品3</div>
        <div id="sector4" class="sector">奖品4</div>
        <div id="sector5" class="sector">奖品5</div>
        <div id="sector6" class="sector">奖品6</div>
        <div id="sector7" class="sector">奖品7</div>
        <div id="sector8" class="sector">奖品8</div>
    </div>
    <button id="start-spin">开始抽奖</button>
    <div id="result"></div>
    <script>
        const prizes = [
            "奖品1",
            "奖品2",
            "奖品3",
            "奖品4",
            "奖品5",
            "奖品6",
            "奖品7",
            "奖品8",    
        ];
        const startSpingBtn = document.getElementById('start-spin');
        const resultDiv = document.getElementById('result');
        startSpingBtn.addEventListener('click',function(){
            startSpingBtn.disabled = true;
            let rounds = Math.floor(Math.random() * 5) + 3;
            let totalDegrees = rounds * 360;
            let finalDegree = Math.floor(Math.random() * 360);
            totalDegrees += finalDegree;
            const wheel = document.querySelector('.wheel');
            wheel.style.adimation = `spin ${totalDegrees}deg 5s linear forwards`;
            wheel.addEventListener('adimationend',function(){
                const sectors = document.querySelectorAll('.sector');
                let selectedSector;
                sectors.forEach(sector => {
                    if(sector.style.transform.includes('rotate('+ finalDegree +' deg)')){
                        selectedSector = sector;
                    }
                });
                resultDiv.innerHTML = `您抽中的奖品是:${selectedSector.textContent}`;
                startSpingBtn.disabled = false;
            });
        });
        // document.getElementById('start-spin').addEventListener('click',function(){
        //     const randomIndex = Math.floor(Math.random() * prizes.length);
        //     const result = prizes[randomIndex];
        //     document.getElementById('result').innerHTML = `您抽中的奖品是:${result}`;
        // });
    </script>
</body>
</html> -->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* styles.css */  
.wheel-container {  
    position: relative;  
    width: 300px;  
    height: 300px;  
    margin: 50px auto;  
    border: 2px solid #333;  
    border-radius: 50%;  
    overflow: hidden;  
}  
  
.wheel {  
    display: flex;  
    justify-content: space-around;  
    width: 100%;  
    height: 100%;  
    border-radius: 50%;  
    transform-style: preserve-3d;  
    transition: transform 5s ease-in-out;  
}  
  
.prize {  
    width: 50%;  
    height: 100%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    transform: skewY(-30deg) rotateX(0deg);  
    backface-visibility: hidden;  
    border-right: 1px solid #ccc;  
    position: relative;  
    z-index: 1;  
}  
  
.prize:last-child {  
    border-right: none;  
}  
  
.prize::before {  
    content: '';  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background: inherit;  
    z-index: -1;  
    transform: skewY(30deg) rotateX(0deg);  
    transform-origin: 0 0;  
}  
  
#spin-button {  
    display: block;  
    margin: 20px auto;  
    padding: 10px 20px;  
    font-size: 16px;  
    cursor: pointer;
    background-color: #333;  
}  
  
#result {  
    text-align: center;  
    margin-top: 20px;  
}
    </style>
</head>
<body>
    <div class="wheel-container">  
        <div class="wheel">  
            <!-- 假设有6个奖品 -->  
            <div class="prize" data-prize="奖品1">奖品1</div>  
            <div class="prize" data-prize="奖品2">奖品2</div>  
            <div class="prize" data-prize="奖品3">奖品3</div>  
            <div class="prize" data-prize="奖品4">奖品4</div>  
            <div class="prize" data-prize="奖品5">奖品5</div>  
            <div class="prize" data-prize="奖品6">奖品6</div>  
        </div>  
        <button id="spin-button">开始抽奖</button>  
        <p id="result">点击按钮开始抽奖</p>  
    </div>
    <script>
        // script.js  
    document.getElementById('spin-button').addEventListener('click', function() {  
    const wheel = document.querySelector('.wheel');  
    const degrees = Math.random() * 360; // 随机旋转角度  
    wheel.style.transform = `rotateY(${degrees}deg)`;  
  
    // 假设动画完成后（这里简化为立即），我们随机选择一个奖品  
    const prizes = document.querySelectorAll('.prize');  
    const selectedIndex = Math.floor(Math.random() * prizes.length);  
    const result = prizes[selectedIndex].getAttribute('data-prize');  
  
    document.getElementById('result').textContent = `恭喜你，抽中了：${result}`;  
  
    // 如果需要动画结束后停止在某个奖品上，可以计算旋转角度使其停在正确的位置  
    // 这里为了简化，我们直接显示结果  
});
    </script>
</body>
</html>